import { createHashRouter } from 'react-router-dom'
import Home from '@renderer/layout/Home'
import Config from '@renderer/layout/Config'
import Category from '@renderer/pages/Categroy'
import ContentList from '@renderer/pages/ContentList'
import categoryLoader from '@renderer/pages/Categroy/categoryLoader'
import contentListLoader from '@renderer/pages/ContentList/contentListLoader'
import Content from '@renderer/pages/Content'
import ContentLoader from '@renderer/pages/Content/ContentLoader'
import ContentAction from '@renderer/pages/Content/ContentAction'
import { Welcome } from '@renderer/pages/Welcome'
import contentListAction from '@renderer/pages/ContentList/contentListAction'
import categoryAction from '@renderer/pages/Categroy/categoryAction'
import Setting from '@renderer/pages/Setting'

const router: any = createHashRouter([
  {
    path: '/',
    element: <Home />
  },
  {
    path: 'config',
    element: <Config />,
    children: [
      {
        index: true,

        element: <Setting />
      },
      {
        path: 'category',
        loader: categoryLoader, // loader 路由加载器，会在页面渲染前执行,用来加载数据,一般会捕获get方法
        action: categoryAction, // action一般用来捕获除get以外的请求方法
        element: <Category />,
        children: [
          {
            path: 'contentList/:categoryId?', // ? 表示可选参数 ,因为有个路由是contentList，用来查看所有片段
            loader: contentListLoader,
            action: contentListAction,
            element: <ContentList />,
            children: [
              {
                index: true, // 未匹配到路由时，默认渲染的组件
                element: <Welcome />
              },
              {
                path: 'content/:id',
                loader: ContentLoader,
                action: ContentAction,
                element: <Content />
              }
            ]
          }
        ]
      }
    ]
  }
])

export default router
